<template>
  <div class="quota-item">
    <div class="quota-overview" :class="[bgColor]">
      <!-- {{ quota.quotaName }} -->
      <div class="name-time">
        <div class="quota-name">
          {{ quota.quotaName }}<span v-if="quota.unit">({{ quota.unit }})</span>
        </div>
        <div class="time-str">{{ timestr }}</div>
      </div>
      <div class="value-btn">
        <div class="values">
          <div class="value-str" v-if="quota.strValue">
            <img
              v-for="(item, index) in imglist"
              :src="item.icon"
              :key="index"
              @click="showContentDialog(quota.strValue)"
            />
          </div>
          <div class="value" v-else>
            <div>{{ quota.value }}</div>
            <div
              v-if="quota.increaseNum !== null && quota.increaseNum !== 0"
              style="display: flex; font-size: 16px; align-items: center"
            >
              <div
                style="
                  margin-left: 10px;
                  width: 25px;
                  height: 25px;
                  border-radius: 50%;
                  background: #ff8a04;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                环
              </div>
              <span v-if="quota.increaseNum > 0">↑</span>

              <span v-else-if="quota.increaseNum < 0">↓</span>
              <!-- <img
               
                src="~@/assets/shangsheng.png"
                style="height: 14px; padding-right: 2px"
                alt=""
              />
              <img
               
                src="~@/assets/xiajiang.png"
                style="height: 14px; padding-right: 2px"
                alt=""
              /> -->
              <div>{{ quota.increaseNum }}</div>
              <div class="col"></div>
              <div>{{ quota.increaseSpeed }}%</div>
            </div>
          </div>
          <!-- <div></div> -->
          <!-- <div></div> -->
          <!-- <div></div> -->
        </div>
        <SvgIcon
          icon-class="xiangqing"
          fontsize="23px"
          style="margin-right: 20px"
          :class="{ 'reverse-up-down': !!showDetail }"
          @click="handleDetailShow"
        />
      </div>
    </div>
    <div v-if="!!showDetail" class="quota-detail">
      <QuotaDetail :detail="showDetail" :quota="quota" />
    </div>
    <van-dialog v-model:show="show">
      <template #default>
        <div style="font-size: 16px; color: black; padding: 26px 26px 0">
          <div style="text-align: center; font-weight: bold; font-size: 20px">道路巡回保洁时间</div>
          <template v-for="(item, index) in time" :key="index">
            <div style="margin: 10px 0">{{ item }}</div>
          </template>
        </div>
      </template>
    </van-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { QuotaItem } from '@/store/type'
import SvgIcon from '@/components/SvgIcon'

import QuotaDetail from './Detail.vue'
import useQuotaItem from './useQuotaItem'

import cleaningFour from '@/assets/home/cleaning-four.png'
import cleaningOne from '@/assets/home/cleaning-one.png'
import cleaningTwo from '@/assets/home/cleaning-two.png'
import cleaningThree from '@/assets/home/cleaning-three.png'

defineOptions({
  name: 'QuotaItem'
})

interface IProps {
  quota: QuotaItem
  bgColor: string
}

const props = defineProps<IProps>()

const { timestr, showDetail, handleDetailShow } = useQuotaItem(props.quota)

const show = ref(false)

const imglist = [
  {
    icon: cleaningFour,
    bgcolor: '#006633',
    content: ''
  },
  {
    icon: cleaningOne,
    bgcolor: '#189557',
    content: ''
  },
  {
    icon: cleaningTwo,
    bgcolor: '#5cb85c',
    content: ''
  },
  {
    icon: cleaningThree,
    bgcolor: '#8fcc52',
    content: ''
  }
]
// 处理字符传入
// const incoming = (data: string) => {
//   for (let ss in imglist) {
//     imglist[ss].content = data.split("\r\n")[ss]
//   }
//   return imglist
// }
const time = ref(<string[]>[])
// 显示道路巡回保洁时间内容弹窗
const showContentDialog = (content: string) => {
  let arr = <string[]>[]
  content.split('.').map((m, i) => {
    if (i !== 0) {
      if (i !== content.split('.').length - 1) {
        arr.push(i + '.' + m.substring(0, m.length - 1))
      } else {
        arr.push(i + '.' + m)
      }
    }
  })
  time.value = arr
  show.value = true
}
</script>

<style lang="less">
.quota-item {
  width: 100%;
  .quota-overview {
    height: 65.33px;
    color: #fff;
    border-radius: 3.85px;
    box-shadow: 0px 0.64px 3.21px rgba(211, 218, 228, 0.86);
    padding: 0px 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    &.blue {
      // background: linear-gradient(to bottom, rgba(51, 132, 255, 0.7), rgba(5, 109, 255, 0.7));
      background: url('../../icons/blue_bag.png');
      background-size: 120% 120%;
      background-position: 20%;
    }
    &.green {
      // background: linear-gradient(to bottom, rgba(55, 185, 107, 0.7), rgba(89, 180, 122, 0.7));
      background: url('../../icons/green_bag.png');
      background-size: 120% 120%;
      background-position: 20%;
    }
    &.orange {
      // background: linear-gradient(to top, rgba(248, 117, 89, 0.7), rgba(252, 167, 122, 0.7));
      background: url('../../icons/orange_bag.png');
      background-size: 120% 120%;
      background-position: 20%;
    }

    .name-time {
      display: flex;
      justify-content: space-between;
      font-size: 13.54px;

      .time-str {
        min-width: 65px;
        font-weight: 300;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    .value-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .value-str {
        margin-left: 10px;
        img {
          display: inline-block;
          vertical-align: middle;
          margin-right: 8px;
          width: 20px;
          height: 20px;
        }
      }
      .value {
        min-width: 60px;
        font-size: 25px;
        text-align: center;
        display: flex;
        align-items: center;
        .col {
          // border: 1px solid rgb(160, 165, 173);
          height: 12px;
          width: 1px;
          background: #fff;
          margin: 0 5px 0 7px;
        }
      }
    }
  }
}
</style>
